<!--
 * @description: 文件描述
 * @version: 0.0.1
 * @author: xxx
 * @Date: 2025-03-06 15:33:39
-->
<template>
  <div class="not-found-container">
    <el-card class="not-found-card">
      <div class="content-wrapper">
        <h1 class="error-code">404</h1>
        <p class="error-message">页面不存在</p>
        <el-button 
          type="primary" 
          @click="$router.push('/')"
          class="back-button"
        >
          返回首页
        </el-button>
      </div>
    </el-card>
  </div>
</template>
<style scoped>
.not-found-container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f2f5;
}

.not-found-card {
  width: 600px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.content-wrapper {
  text-align: center;
  padding: 40px 0;
}

.error-code {
  font-size: 80px;
  color: #606266;
  margin-bottom: 16px;
}

.error-message {
  font-size: 20px;
  color: #909399;
  margin-bottom: 32px;
}

.back-button {
  width: 200px;
  height: 40px;
  font-size: 16px;
}
</style>